import React,{useEffect,useState}from 'react'
import { Container } from './style'
import mingjiu1 from '../../../assets/images/mingjiu1.webp'
import mingjiu2 from '../../../assets/images/mingjiu2.jpg'
import mingjiu3 from '../../../assets/images/mingjiu3.jpg'
import mingjiu4 from '../../../assets/images/mingjiu4.jpg'

export default function ListThree() {
  const [a,setA] = useState();
  const [second,setSecond] = useState(60);
  const [minute,setMinute] = useState(59);
  const [hour,setHour] = useState(7);
  const begin = () =>{
    if(second === 0){
      setMinute(setMinute => setMinute - 1 )
      setSecond(second => second = 59);
      
    }else{
      setSecond(second => second - 1)
    }
  }
  useEffect(()=>{
    setA(setInterval(begin,1000))
    clearInterval(a)
    return()=>{
      clearInterval(a)
    }
  },[second])

  return (
      <Container>
        <div className="top">
            <div className="t_left">尖货秒杀</div>
            <div className='t_middle'>0{hour} : {minute} : {second} </div>
            <div className="t_right">击穿低价</div>
        </div>
        <div className="bottom">
            <div className="box">
              <img src={mingjiu1}className="b_box" />
              <div className="b_price">
                ￥498
                <div className="before">
                  ￥600
                </div>
              </div>
            </div>
            <div className="box">
              <img src={mingjiu2}className="b_box" />
              <div className="b_price">
                ￥560
                <div className="before">
                  ￥700
                </div>
              </div>
            </div>
            <div className="box">
              <img src={mingjiu3}className="b_box" />
              <div className="b_price">
                ￥360
                <div className="before">
                  ￥600
                </div>
              </div>
            </div>
            <div className="box">
              <img src={mingjiu4}className="b_box" />
              <div className="b_price">
                ￥420
                <div className="before">
                  ￥620
                </div>
              </div>
            </div>

        </div>        
      </Container>
    
  )
}
